<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全态势综合分析报告</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary: #2E95F8;
            --secondary: #1B64AA;
            --dark-bg: #060606;
            --card-bg: rgba(8, 26, 48, 0.8);
            --header-bg: #09162F;
            --text-light: #E9EAEC;
            --text-muted: #8B9DC3;
            --danger: #FF4D4F;
            --warning: #FAAD14;
            --success: #52C41A;
            --info: #1890FF;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background: var(--dark-bg);
            color: var(--text-light);
            line-height: 1.6;
        }

        .row {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .col {
            flex: 1;
            min-width: 300px;
        }

        .page {
            max-width: 1400px;
            margin: 24px auto;
            padding: 0 16px;
        }

        .header {
            margin-bottom: 32px;
            padding: 24px;
            background-color: var(--header-bg);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-left: 4px solid var(--primary);
        }

        .header h1 {
            color: var(--primary);
            font-size: 2.2rem;
            margin-bottom: 8px;
        }

        .header p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        .card {
            border-radius: 8px;
            padding: 20px;
            border: 1px solid var(--secondary);
            background: var(--card-bg);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }

        .card-title {
            margin-bottom: 16px;
            font-size: 1.25rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-title i {
            font-size: 1.1em;
        }

        .overview {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }

        .overview-item {
            flex: 1;
            min-width: 150px;
            padding: 12px;
            background: rgba(18, 155, 255, 0.1);
            border-radius: 6px;
            border-left: 3px solid var(--primary);
        }

        .overview-item .label {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .overview-item .value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary);
        }

        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
            font-size: 0.9rem;
        }

        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid rgba(27, 100, 170, 0.3);
        }

        th {
            background-color: rgba(27, 100, 170, 0.2);
            color: var(--primary);
            font-weight: 600;
        }

        tr:hover {
            background-color: rgba(27, 100, 170, 0.1);
        }

        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-danger {
            background-color: rgba(255, 77, 79, 0.2);
            color: var(--danger);
        }

        .badge-warning {
            background-color: rgba(250, 173, 20, 0.2);
            color: var(--warning);
        }

        .badge-success {
            background-color: rgba(82, 196, 26, 0.2);
            color: var(--success);
        }

        .badge-info {
            background-color: rgba(24, 144, 255, 0.2);
            color: var(--info);
        }

        ul.card-list {
            list-style-type: none;
        }

        ul.card-list li {
            padding: 10px 0;
            border-bottom: 1px dashed rgba(27, 100, 170, 0.3);
            display: flex;
            align-items: center;
        }

        ul.card-list li:last-child {
            border-bottom: none;
        }

        ul.card-list li::before {
            content: "•";
            color: var(--primary);
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-right: 8px;
        }

        .footer {
            margin-top: 40px;
            padding: 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            border-top: 1px solid rgba(27, 100, 170, 0.3);
        }

        @media (max-width: 768px) {
            .row {
                flex-direction: column;
                gap: 16px;
            }
            
            .col {
                min-width: 100%;
            }
            
            .header {
                padding: 16px;
            }
            
            .header h1 {
                font-size: 1.8rem;
            }
            
            .overview {
                gap: 12px;
            }
            
            .overview-item {
                min-width: calc(50% - 12px);
            }
        }

        @media (max-width: 480px) {
            .overview-item {
                min-width: 100%;
            }
            
            .page {
                padding: 0 12px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>

    <div class="page">

        <!-- 头部 -->
        <div class="header">
            <h1>网络安全态势综合分析报告</h1>
            <p>基于安全状态信息和安全趋势信息的全面分析报告</p>
        </div>

        <div class="main">

            <!-- 概览数据 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-shield-alt"></i>安全概览</h2>
                        <div class="card-body">
                            <div class="overview">
                                <div class="overview-item">
                                    <div class="label">总资产数量</div>
                                    <div class="value">9,065</div>
                                </div>
                                <div class="overview-item">
                                    <div class="label">弱口令数量</div>
                                    <div class="value">280</div>
                                </div>
                                <div class="overview-item">
                                    <div class="label">入侵事件</div>
                                    <div class="value">5</div>
                                </div>
                                <div class="overview-item">
                                    <div class="label">高危资产</div>
                                    <div class="value">4</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 三列布局 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-chart-pie"></i>资产类型分布</h2>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="assetDistributionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-key"></i>TOP5 弱口令</h2>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="weakPasswordChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-bug"></i>资产漏洞情况</h2>
                        <div class="card-body">
                            <ul class="card-list">
                                <li>隐藏文件目录检测：通过命令行创建隐藏文件和目录</li>
                                <li>敏感命令执行检测：使用 Grep 命令查找系统上包含 Password 关键字的文件</li>
                                <li>发现系统信息检测：检测 modprobe 配置文件中涉及内核模块的文件事件</li>
                                <li>检测到 Linux tmp 目录程序运行</li>
                                <li>Linux 受限 Shell 通过 Linux 二进制突破</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 两列布局 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-fire"></i>入侵攻击事件</h2>
                        <div class="card-body">
                            <table>
                                <thead>
                                    <tr>
                                        <th>事件类型</th>
                                        <th>出现次数</th>
                                        <th>威胁等级</th>
                                        <th>首次发生时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Linux tmp 目录程序运行</td>
                                        <td>2</td>
                                        <td><span class="badge badge-success">低危</span></td>
                                        <td>2025-04-15 14:52:11</td>
                                    </tr>
                                    <tr>
                                        <td>可疑行为</td>
                                        <td>3</td>
                                        <td><span class="badge badge-warning">中危</span></td>
                                        <td>2025-04-15 14:51:44</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-server"></i>受影响资产 TOP5</h2>
                        <div class="card-body">
                            <table>
                                <thead>
                                    <tr>
                                        <th>IP 地址</th>
                                        <th>威胁等级</th>
                                        <th>命中次数</th>
                                        <th>主要攻击类型</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>10.254.179.45</td>
                                        <td><span class="badge badge-danger">高危</span></td>
                                        <td>8,153</td>
                                        <td>未明确</td>
                                    </tr>
                                    <tr>
                                        <td>192.168.198.138</td>
                                        <td><span class="badge badge-danger">高危</span></td>
                                        <td>1,648</td>
                                        <td>未明确</td>
                                    </tr>
                                    <tr>
                                        <td>10.254.177.226</td>
                                        <td><span class="badge badge-danger">高危</span></td>
                                        <td>850</td>
                                        <td>SSH 暴力破解成功</td>
                                    </tr>
                                    <tr>
                                        <td>10.254.177.216</td>
                                        <td><span class="badge badge-danger">高危</span></td>
                                        <td>486(两次)</td>
                                        <td>删除 history 文件、SSH 软链接后门</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 一列布局 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-lightbulb"></i>安全趋势预测</h2>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="trendChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实施路线图 -->
            <div class="row">
                <div class="col">
                    <div class="card">
                        <h2 class="card-title"><i class="fas fa-map-marked-alt"></i>实施路线图</h2>
                        <div class="card-body">
                            <table>
                                <thead>
                                    <tr>
                                        <th>阶段</th>
                                        <th>时间框架</th>
                                        <th>主要任务</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>紧急处置</td>
                                        <td>0-7 天</td>
                                        <td>1. 隔离高危主机<br>2. 重置所有弱密码<br>3. 禁用受影响 SSH 服务</td>
                                    </tr>
                                    <tr>
                                        <td>短期加固</td>
                                        <td>8-30 天</td>
                                        <td>1. 部署基础监控<br>2. 实施密码策略<br>3. 关键系统 MFA 部署</td>
                                    </tr>
                                    <tr>
                                        <td>中期改进</td>
                                        <td>1-3 月</td>
                                        <td>1. 网络分段实施<br>2. 漏洞管理流程建立<br>3. SOC 团队组建</td>
                                    </tr>
                                    <tr>
                                        <td>长期优化</td>
                                        <td>3-6 月</td>
                                        <td>1. 零信任架构实施<br>2. 威胁情报整合<br>3. 自动化响应建设</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2025 网络安全团队 - 综合分析报告 | 最后更新: 2025年4月</p>
        </div>
    </div>

    <script>
        // 资产类型分布图
        const assetCtx = document.getElementById('assetDistributionChart').getContext('2d');
        const assetChart = new Chart(assetCtx, {
            type: 'doughnut',
            data: {
                labels: ['软件应用', 'AI 应用', 'Web 应用框架', 'Web 应用', 'Web 服务', '数据库', 'Web 站点'],
                datasets: [{
                    data: [4109, 4109, 381, 337, 214, 36, 69],
                    backgroundColor: [
                        '#2E95F8',
                        '#1B64AA',
                        '#52C41A',
                        '#FAAD14',
                        '#F5222D',
                        '#722ED1',
                        '#13C2C2'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // 弱口令分布图
        const passwordCtx = document.getElementById('weakPasswordChart').getContext('2d');
        const passwordChart = new Chart(passwordCtx, {
            type: 'bar',
            data: {
                labels: ['antiy@123', 'password', '123123', '123456', 'testtest'],
                datasets: [{
                    label: '命中次数',
                    data: [265, 7, 4, 3, 1],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw || 0;
                                const percentage = Math.round((value / 280) * 100);
                                return `命中次数: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 安全趋势图
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        const trendChart = new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月(预测)', '6月(预测)'],
                datasets: [
                    {
                        label: '弱口令利用',
                        data: [120, 150, 180, 210, 250, 280],
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: 'SSH攻击',
                        data: [30, 45, 60, 75, 90, 110],
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '横向移动攻击',
                        data: [15, 20, 25, 30, 40, 50],
                        borderColor: 'rgba(255, 206, 86, 1)',
                        backgroundColor: 'rgba(255, 206, 86, 0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>

</html>